[AngularJS] カレンダーにおける日付 (Date) のお世話サンプル

車輪開発大好きおたいがです。こんにちは。（挨拶）

今回は日付 (Date) オブジェクトをお世話するときに気を付けておくと良い点をまとめてみました。

ui.bootstrap.datepicker のサンプル

Datepicker を用いたサンプルを用意しました。
「開始日 (fromDate) 」「終了日 (toDate)」という 2 つの日付を選択できるものとお考えください。

このサンプルを元に話を続けます。

複数モデルの世話

出力

わざわざ説明する必要ないかもしれませんが、データバインディング機能を使えば可能です。フィルタ機能で任意の文字列に変換しています。

<h2>Date : {{fromDate|date:'yyyy/M/d'}} ~ {{toDate|date:'yyyy/M/d'}}</h2>

監視

「開始日」「終了日」の各モデルを $scope.$watch() で監視することはもちろんできますが、以下のように記述することで複数モデルをまとめて監視することができます。

$scope.$watch('[fromDate,toDate]',
  function(newValue, oldValue) {
    //TODO:
  }, true // <- このブール値がキモ
);
[/javascript]

<p>または、<tt>$scope.$watchCollection()</tt> を使用して、以下のように記述すれば OK です。</p>

$scope.$watchCollection('[fromDate,toDate]',
  function(newValue, oldValue) {
    //TODO:
  }
);

サンプルでカレンダーの日付を変更したときに、コンソールにログを出力するようにしていますので、併せてご確認ください。

$watch() と $watchCollection() の違い

上記サンプルの場合、カレンダーで同一日付を選択したときでも実行されるのが $scope.$watchCollection() で、それ以外はまったく同じように振る舞う…といったところでしょうか。コールバックに格納される引数にも違いはありません。作るアプリケーションの仕様に合わせて使い分ければ良いと思います。

まとめ

• 複数のモデルはまとめて監視することが可能
• 仕様に応じて $scope.$watch(), $scope.$watchCollection() を使い分ける